<template>
	<view class="A-Medium orderItem" :class="model=='light'?'orderItemLight':''">
		<!-- 订单号、创建时间 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{item.orderNo}}
			</view>
			<view class="text2">
				{{item.createTime}}
			</view>
		</view>
		<!-- BTC看涨价、BTC看跌价、BTC看总和 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{item.coinType.replace('USDT','')}}
				{{
					item.bullishBearish=='Bullish'?i18n11.n001:
					item.bullishBearish=='Bearish'?i18n11.n002:i18n11.n003
				}}
			</view>
			<view class="text2 f28">
				{{(item.bullishBearish=='Bullish'||item.bullishBearish=='Bearish')?'$'+item.buyPrice:item.bullishBearish=='Single'?i18n11.n004:i18n11.n005}}
			</view>
		</view>
		<!-- 投入金额 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{i18n11.n006}}
			</view>
			<view class="text4">
				${{item.buyAmount}}
			</view>
		</view>
		<!-- BTC实时价 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{item.coinType.replace('USDT','')}}{{i18n11.n007}}
			</view>
			<view class="text2">
				${{item.optionsOrderStatus==0?optionPrice:item.currentPrice}}
			</view>
		</view>
		<!-- 涨跌状态、总和状态 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{(item.bullishBearish=='Bullish'||item.bullishBearish=='Bearish')?i18n11.n008:i18n11.n009}}
			</view>
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Bullish'||item.bullishBearish=='Bearish')"
				:class="(optionPrice>item.buyPrice)?'text3':'text4'">
				{{optionPrice>item.buyPrice?i18n11.n010:i18n11.n011}}
			</view>
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Single'||item.bullishBearish=='Plural')"
				:class="((optionPrice*100)%2==0)?'text5':'text6'">
				{{(optionPrice*100)%2==0?i18n11.n012:i18n11.n013}}
			</view>
			
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Bullish'||item.bullishBearish=='Bearish')"
				:class="(item.currentPrice>item.buyPrice)?'text3':'text4'">
				{{item.currentPrice>item.buyPrice?i18n11.n010:i18n11.n011}}
			</view>
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Single'||item.bullishBearish=='Plural')"
				:class="((item.currentPrice*100)%2==0)?'text5':'text6'">
				{{(item.currentPrice*100)%2==0?i18n11.n012:i18n11.n013}}
			</view>
		</view>
		<!-- 当前盈亏 -->
		<view class="flex align-center justify-between mb14">
			<view class="text1">
				{{i18n11.n014}}
			</view>
			<!-- 看涨 -->
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Bullish')"
				:class="(optionPrice>item.buyPrice)?'text3':'text4'">
				<!-- ${{(optionPrice>item.buyPrice)?'+'+item.buyAmount*(1+profit1)/100:'-'+item.buyAmount*(profit2)/100}} -->
				${{(optionPrice>item.buyPrice)?'+'+item.buyAmount*(profit1)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看跌 -->
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Bearish')"
				:class="(optionPrice&lt;item.buyPrice)?'text3':'text4'">
				<!-- ${{(optionPrice&lt;item.buyPrice)?'+'+item.buyAmount*(1+profit1)/100:'-'+item.buyAmount*(profit2)/100}} -->
				${{(optionPrice&lt;item.buyPrice)?'+'+item.buyAmount*(profit1)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看单 -->
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Single')"
				:class="((optionPrice*100)%2!=0)?'text3':'text4'">
				<!-- {{((optionPrice*100)%2!=0)?'+'+item.buyAmount*(1+profit3)/100:'-'+item.buyAmount*(profit4)/100}} -->
				{{((optionPrice*100)%2!=0)?'+'+item.buyAmount*(profit3)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看双 -->
			<view v-if="item.optionsOrderStatus==0&&(item.bullishBearish=='Plural')"
				:class="((optionPrice*100)%2==0)?'text3':'text4'">
				<!-- {{((optionPrice*100)%2==0)?'+'+item.buyAmount*(1+profit3)/100:'-'+item.buyAmount*(profit4)/100}} -->
				{{((optionPrice*100)%2==0)?'+'+item.buyAmount*(profit3)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看涨 -->
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Bullish')"
				:class="(item.currentPrice>item.buyPrice)?'text3':'text4'">
				<!-- ${{(item.currentPrice>item.buyPrice)?'+'+item.buyAmount*(1+profit1)/100:'-'+item.buyAmount*(profit2)/100}} -->
				${{(item.currentPrice>item.buyPrice)?'+'+item.buyAmount*(profit1)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看跌 -->
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Bearish')"
				:class="(item.currentPrice&lt;item.buyPrice)?'text3':'text4'">
				<!-- ${{(item.currentPrice&lt;item.buyPrice)?'+'+item.buyAmount*(1+profit1)/100:'-'+item.buyAmount*(profit2)/100}} -->
				${{(item.currentPrice&lt;item.buyPrice)?'+'+item.buyAmount*(profit1)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看单 -->
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Single')"
				:class="((item.currentPrice*100)%2!=0)?'text3':'text4'">
				<!-- {{((item.currentPrice*100)%2!=0)?'+'+item.buyAmount*(1+profit3)/100:'-'+item.buyAmount*(profit4)/100}} -->
				{{((item.currentPrice*100)%2!=0)?'+'+item.buyAmount*(profit3)/100:'-'+item.buyAmount}}
			</view>
			<!-- 看双 -->
			<view v-if="item.optionsOrderStatus==1&&(item.bullishBearish=='Plural')"
				:class="((item.currentPrice*100)%2==0)?'text3':'text4'">
				<!-- {{((item.currentPrice*100)%2==0)?'+'+item.buyAmount*(1+profit3)/100:'-'+item.buyAmount*(profit4)/100}} -->
				{{((item.currentPrice*100)%2==0)?'+'+item.buyAmount*(profit3)/100:'-'+item.buyAmount}}
			</view>
		</view>
		<!-- 订单交割倒计时 -->
		<view v-if="item.optionsOrderStatus==0" class="flex align-center justify-between">
			<view class="text1">
				{{i18n11.n015}}
			</view>
			<view class="text2">
				{{djs}}
			</view>
		</view>
		<!-- 订单交割倒状态 -->
		<view v-else class="flex align-center justify-between">
			<view class="text1">
				{{i18n11.n016}}
			</view>
			<view class="text2">
				{{i18n11.n017}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "qqjlList",
		props: {
			item: {
				type: Object,
				default: res => {
					return {}
				}
			},
			djs: {
				type: String,
				default: ''
			}
		},
		computed: {
			i18n10() {
				return this.$t('newObj');
			},
			i18n11() {
				return this.$t('newObj2');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark'
			},
			money() {
				if (this.moneyIndex == -1) {
					return 0
				}
				return this.moneyList[this.moneyIndex].title * this.moneyNum
			},
			optionPrice() {
				return this.$store.state.config.optionPrice;
			},
			profit1() {
				return this.$store.state.config.profit1;
			},
			profit2() {
				return this.$store.state.config.profit2;
			},
			profit3() {
				return this.$store.state.config.profit3;
			},
			profit4() {
				return this.$store.state.config.profit4;
			},
		},
		data() {
			return {

			};
		},
		methods: {
			getPriceParity(number) {
				let sum = 0;
				const digits = number.toString();

				for (let i = 0; i < digits.length; i++) {
					sum += parseInt(digits[i], 10);
				}
				console.log(sum%2==0,'cs---------------cs');
				return sum%2==0;
			},
		}
	}
</script>

<style scoped lang="scss">
	.orderItem {
		margin: 0 28rpx 24rpx 28rpx;
		padding: 28rpx;
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		font-size: 24rpx;

		.text1 {
			color: #7F838D;
		}

		.text2 {
			color: #FFFFFF;
		}

		.text3 {
			color: #D22540;
		}

		.text4 {
			color: #53D290;
		}

		.text5 {
			color: #74C145;
		}

		.text6 {
			color: #F3BA2F;
		}

		.f28 {
			font-size: 28rpx;
		}

		.mb14 {
			margin-bottom: 14rpx;
		}
	}

	.orderItemLight {
		background: #fff;
		border: 2rpx solid #fff;

		.text2 {
			color: #47474A;
		}
	}
</style>